<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
    </div>
    <div>
      <h2>money -- {{money | currency('$',4)}}</h2>
      <!-- <h2>money -- {{money | currency('$',4)}}</h2> -->
    </div>
  </body>
  <script>
    Vue.filter("fixed", (value, n = 2) => {
      if (!value) return value;
      return value.toFixed(n);
    });
    //货币过滤器
    Vue.filter("currency", (value, type = "￥", n) => {
      if (!value) return value;
      value = value.toFixed(n);
      value = value.split(".");
      var zheng = value[0];
      var xiao = value[1];
      zheng = zheng.split("").reverse();
      zheng = zheng.map((item, index) => {
        if (index % 3 == 0 && index != 0) {
          item = item + ",";
        }
        return item;
      });
      return type + zheng.reverse().join("") + "." + xiao;
    });

    const vm = new Vue({
      data: {
        title: "v-on 事件绑定",
        money: 154845656161615.1234,
      },
      methos: {
        mounted() {
          document.querySelectorAll("title")[0].innerHTML = this.title;
        },
      },
    }).$mount("#app");
  </script>
</html>
